<script>

import requestUtil from "@/utils/RequestUtil";

export default {
  name: "brandList",
  data() {
    return {
      listData: [],
      num: 1,
      size: 10,
      initLoading: true,
      listLoading: false,
      noMoreData: false,
    }
  },
  methods: {
    init() {
      requestUtil({
        method: "get",
        url: '/getBrandList',
        params: {
          'pageNum': this.num,
          'pageSize': this.size
        }
      }).then(res => {
        if (res.data.code !== 1) {
          throw new Error('错误code')
        }
        this.listData = res.data.data.records
      }).catch(err => {
        console.log(err)
      }).finally(() => {
        this.initLoading = false
      })
    },
    loadMore() {
      this.num = this.num + 1
      requestUtil({
        method: "get",
        url: 'getBrandList',
        params: {
          'pageNum': this.num,
          'pageSize': this.size
        }
      }).then(res => {
        console.log(res)
        if (res.data.code !== 1) {
          throw new Error('错误code')
        }
        this.listData = [...this.listData, ...res.data.data.records]
        if (this.listData.length >= res.data.data.total) {
          this.noMoreData = true
        }
      }).catch(err => {
        console.log(err)
      }).finally(() => {
        this.listLoading = false
      })
    }
  },
  mounted() {
    this.init()
  }
}
</script>

<template>
  <div>
    <img alt="bannerImg" src="https://www.macrozheng.com/app/static/recommend_brand_banner.png"
         style="width: 100%;margin-bottom: 10px"/>
    <div style="background-color: white;padding: 0 10px;">
      <van-loading v-if="initLoading" size="24px" vertical>加载中...</van-loading>
      <van-list
          v-show="!initLoading"
          v-model="listLoading"
          :finished="noMoreData"
          finished-text="没有更多了"
          @load="loadMore">
        <div style="display: flex;flex-wrap: wrap;padding-top: 10px">
          <van-cell v-for="item in listData" :key="item.storeName"
                    style="width: 50%;height: 150px"
                    @click="$router.push({name: 'brandDetail',query: {id: item.storeId}})">
            <div style="display: flex;flex-direction: column;">
              <van-image :src="item.img" fit="contain" height="75"/>
              <span>{{ item.storeName }}</span>
              <span>星级：{{ item.storeStart }}</span>
            </div>
          </van-cell>
        </div>
      </van-list>
    </div>
  </div>
</template>

<style scoped>

</style>